<template>
    <div>
        <quill-editor class="editor" v-model="editorContent" ref="myQuillEditor" :options="editorOption"
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
        </quill-editor>
        <el-upload action multiple :http-request="httpRequests">
            <!-- <el-button size="small" type="primary">点击上传</el-button> -->
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
            </div>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    </div>
</template>
   
<script>
import { quillEditor } from "vue-quill-editor";
import { uploadFile } from "@/api/datamanage/store.js"

const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // toggled buttons
    ['blockquote', 'code-block'],

    [{ header: 1 }, { header: 2 }], // custom button values
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
    [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
    [{ direction: 'rtl' }], // text direction

    [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
    [{ header: [1, 2, 3, 4, 5, 6, false] }],

    [{ color: [] }, { background: [] }], // dropdown with defaults from theme
    [{ font: [] }],
    [{ align: [] }],
    ['link', 'image', 'video'],
    ['clean'] // remove formatting button
]

export default {
    props: ["content"],
    data() {

        return {

            editorContent: this.content,
            editorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            // 重写点击组件上的图片按钮要执行的代码
                            'image': function (value) {
                                document.querySelector('.quill-upload .el-icon-upload').click()
                            }
                        }
                    }

                }
            },
        };


    },
    computed: {
        editor() {
            console.log(this.$refs.myTextEditor.quillEditor);
            return this.$refs.myTextEditor.quillEditor;
        },
    },
    methods: {
        onEditorBlur() { },
        onEditorFocus(e) {
            //编辑器获得焦点的事件
            // console.log(e);
            this.$emit("changeContent", this.editorContent)
        },
        onEditorChange(e) {
            //内容改变事件
            // console.log(e);
            this.$emit("changeContent", this.editorContent)
        },
        httpRequests(param) {
            console.log(param)
            const formData = new FormData();
            console.log("-----------------------")
            console.log(param.raw)
            formData.append('multipartFile', param.file)
            console.log(formData)
            uploadFile(formData).then(res => {
                // 获取文本编辑器
                const quill = this.$refs.myQuillEditor.quill
                console.log(quill)
                // 获取光标位置
                const pos = this.$refs.myQuillEditor.quill.selection.savedRange.index;
                console.log("pos---------------------"+pos)
                // 插入图片到光标位置
                quill.insertEmbed(pos, 'image',res.data)
                
                quill.setSelection(length + 1)


            })

        },
    },
};
</script>
   
<style></style>